<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆柱</title>
    <style>
        /*将容器设置背景颜色：引入图表做好衬托*/
        #container{
        width: 800px;
        height: 600px;
        background: #F8F8FF;
        margin: auto;
        }
    </style>
    <!-- 1.引入echarts.js文件-->
    <script src="js/echarts.js"></script>
</head>
<body>
<!--2.添加一个可以设置高宽的DOM容器(div空间--容器)-->
<div id="container" ></div>
<!-- 3.创建并且实例化Echarts对象  DOM树：爬取21种-->
<script>
    var myInit=echarts.init(document.querySelector("#container"))
    //4.指定配置项跟数据---不会啊（粘贴）先不解释
    option = {
  title: {
    text: '教学支持数据',
                top: "top",  //设置组件离容器上侧的距离
                textStyle: {   //设置标题的颜色
               color: 'black'
               ,fontWeight:'bold'
               }
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['9月', '10月']
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['张建','梁瑾','高颜领','王晓明','康凯','戚贤','王俊星','贾槐坚','申亚辉','薄浩丹']
    }
  ],
  yAxis: [
  {
    type: 'value',
    scale:true,
    name: '授课课时数',
    min: 50,
    max: 250,
    interval: 50,
    axisLabel: {
      formatter: '{value} 节'
    }
  },
  ],
  series: [
    {
      name: '9月',
      type: 'bar',
      data: [
        106,132,106,56,102,190,117,130,166.5,147
      ],
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: '10月',
      type: 'bar',
      data: [
        103, 76, 112, 60, 126, 224, 60, 198, 114, 64
      ],
     markPoint: {
        data: [
                {
                    type:"min"
                    ,name: "最小值"

                }
                ,{ name: 'Min', value: 60, xAxis: 6, yAxis: 65 }

                ,{
                    type:"max"
                    ,name:"最大值"
                }
                 ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }
  ]
};
//5.将配置项设置给echarts实例对象
    myInit.setOption(option)
    //5.将配置项设置给echarts实例对象
    myInit.setOption(option)
</script>
</body>
</html>